<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML>
<html lang="zh">
<head>
    <title>card</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <link type="text/css" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="bootstrap-3.3.5-dist/html5shiv.min.js"></script>
      <script src="bootstrap-3.3.5-dist/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        footer ul li a{
            color: gray;
            text-decoration:none;
        }
        footer ul li a:hover{
            color: gray;
            text-decoration:none;
        }
    </style>
</head>
    <body style="background:rgba(245,245,245,0.5)">
    <div class="container-fluid">
        <div class="row">
        
    		<%@include file="../topnavtag.jsp" %> 
    		
        <div class="col-md-6 col-xs-12 col-md-offset-3">
            <div class="row">
            <!--div class="col-xs-12" style="padding:0px;max-height:220px;overflow:hidden;box-shadow:0px 3px 3px rgba(55,55,55,0.3);">
                <img src="photos/back0.jpg" style="width:100%;">
            </div-->
               
                
            <div class="col-xs-12">
            
            <div style="height:auto;">
            <div style="width:60px;height:60px;">
             <img src="photos/${ulogo}.jpg" style="width:60px;height:60px;border-radius:60px;">     
            </div>
             <div style="width:200px;height:60px;margin-top:-60px;margin-left:60px;">
                <strong style="display:block;margin-top:10px;">${un2}</strong>   
                
                 <span id="forumId" style="display:none;">${forumId }</span>
                 <span id="danqianUid" style="display:none;">${danqianUid }</span>
                 
                <p style="">${lastUpdateTime}</p>  
             </div>
            </div>
            </div>
            
            <div class="col-md-8 col-xs-12">
                <div style="min-height:500px;word-wrap: break-word; word-break: normal;">
                ${content}
                
                </div>
            </div>
                <!--中间右边-->
            <div class="col-md-4 col-xs-12 hidden-sm hidden-xs" style="height:300px;">
                <ul>
                <li><a href="##">为什么会看到这个链接</a></li>
                <li><a href="##">为什么会来到此页面</a></li>
                <li><a href="##">为什么我在手机端无法显示此页面</a></li>
                
                </ul>
            </div>
                
                <!--中间右边-->
                
            <div class="col-md-8 col-xs-12" style="height:auto;line-height:50px;">
                <strong>这些人已经赞了</strong>
                <c:forEach items="${requestScope.zanUserdataList }" var="zanUserdataList">
                 <img src="photos/${zanUserdataList.getUlogo() }.jpg" style="width:40px;height:40px;border-radius:40px;"> 
                </c:forEach> 
                <span>...</span> 
                
                <a href="javascript:" onclick="userZan('${userZan}');return false;" style="float:right;"><span class="glyphicon glyphicon-heart" style="font-size:20px;top:6px;color:red;"></span></a>
           
            </div>  
            
            <div class="col-md-8 col-xs-12">
            
            
                <a href="##"  data-toggle="modal" data-target="#myModal"><strong>我想评论</strong></a>
                <!-- 模态框（Modal） -->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-body">
                                <textarea id="replyArea" class="form-control" rows="3" placeholder="@下某楼层吧"></textarea>
                                
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                    <button type="button" class="btn btn-primary" onclick="userReply();return false;">评论</button>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal -->
                    </div>
                    <!-- 在此div后加载评论 $("#jsonReplyBegin").append(str) -->
            	<div id="jsonReplyBegin"></div>
            	
            	<!-- 加载评论 -->
            	
                <!--评论分页 ajax 刷新-->
                <!-- <nav aria-label="Page navigation">
                  <ul class="pagination">
                    <li>
                      <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                      </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                      <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                      </a>
                    </li>
                  </ul>
                </nav> -->
                
            </div>
            
            <footer class="col-md-12 col-xs-12" style="background:rgba(55,55,55,1)">
                <ul style="list-style:none;padding-left:0px;padding-top:10px;">
                    <!--li><a href="##">我想联系作者</a></li-->
                    <li><a href="javascript:" onclick="alert(862024320);">我想联系论坛作者</a></li>
                    <li><a href="##">为什么移动设备优先？</a></li>
                    <li><a href="##">为什么我会看到这些内容？</a></li>
                    <li><p> &nbsp;</p></li>
                    <li><p style="color:black;">@copyright ahwyy.top</p></li>
                
                </ul>
            </footer>
                
         </div>  
        </div>
        
        </div>
    </div>
    
    
    <script src="jquery/jquery-3.0.0.min.js"></script>
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    //userzan
    var zanFlag = true;
    function userZan(va){
    	
    	if(!zanFlag){
    		alert("你已经点过赞了~~~");
    		return false;
    	}
    	
    	var st = va.split(" ");
    	
    	var xmlhttp = getXmlHttp();
    	
    	xmlhttp.onreadystatechange=function(){
	      	if (xmlhttp.readyState==4 && xmlhttp.status==200){
	        	var str = xmlhttp.responseText;
	        	alert("小手一抖 一赞出手~~");
                
	        }
      	}
    	
    	xmlhttp.open("POST","userZan",true);
    	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    	xmlhttp.send("forumId="+st[0]+"&uid="+st[1]);
    	
    	zanFlag = false;
    }
    

    function userReply(){
        if($("#replyArea").val().length <=0 ){
            alert("写点精彩的评论吧");
            return false;
        }
        
        var ct = $("#replyArea").val();
        var uid = $("#danqianUid").text();
        var forumId = $("#forumId").text();
        

    	var xmlhttp = getXmlHttp();
    	
    	xmlhttp.onreadystatechange=function(){
	      	if (xmlhttp.readyState==4 && xmlhttp.status==200){
	        	var str = xmlhttp.responseText;
                
	        }
      	}
    	
    	xmlhttp.open("POST","userReply",true);
    	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    	xmlhttp.send("content="+ct+"&forumId="+forumId+"&uid="+uid);
        
        
        
        location.reload();
    }

    
    replyList();
    function replyList(){
    	var xmlhttp = getXmlHttp();
        var forumId = $("#forumId").text();
    	
    	xmlhttp.onreadystatechange=function(){
	      	if (xmlhttp.readyState==4 && xmlhttp.status==200){
	        	var str = xmlhttp.responseText;
	        	console.log(str);
	        	var json = JSON.parse(str);
	        	for(var i = 0;i<getHsonLength(json);i++){
	        		

	                var st = "<div style=\"padding-bottom:5px; border-bottom:gray solid 1px;\">";
	                st+= "<strong>作者:"+json[i].un+"&nbsp;&nbsp;#"+json[i].floorNumber+"</strong>";
	                st+= "<p>内容:&nbsp;&nbsp;"+json[i].content+"</p>";
	                st+= "</div>";
	        		
	        		$("#jsonReplyBegin").append(st);
	        		
	        		
	        	}
                
	        }
      	}
    	
    	xmlhttp.open("POST","replysList",true);
    	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    	xmlhttp.send("forumId="+forumId);
    	
        //最后关闭模态框 刷新当前页面
    }

    function getHsonLength(json){
    	var jsonLength=0;
        for (var i in json) {
        	jsonLength++;
        }
        return jsonLength;
    }
    
    
    function getXmlHttp(){

        var xmlhttp;
    	if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
      		xmlhttp=new XMLHttpRequest();
      	}
    	else{// code for IE6, IE5
      		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      	}
    	return xmlhttp;
    }
    
    </script>
    </body>
</html>
